<!-- 注册
 1. vue始终在用双向绑定的思想来准备前后端交互，每一个vue都会定义好变量给 表单（form）或者表格（table）中的html元素的值绑定
-->
<template>
  <div><!-- element组件库的Dialog对话框默认可以通过点击 modal 关闭 Dialog，即点击空白处弹框可关闭。 -->
    <!-- :visible.sync 子组键改变父组件的值 控制子组件的显示-->
    <el-dialog title="标题名" :visible.sync="confirmDialogIsShow" :before-close="handleClose" :close-on-click-modal="false" append-to-body>
      <div id="skills">
        <p>我的订单</p>
        <hr>

        <div class="orderInfo">
          <!--          <span>订单号</span>-->
          <span></span>
          <span>下单日期</span>
          <span>结束日期</span>
          <span>下单时间</span>
          <span>价格</span>

        </div>

        <div class="orderInfo" >
          <div>
            <!--          <span>{{order.urno}}</span>-->

<!--            <span class="orderimg"><img :src="getImgUrl(order.restaurant.rimg)"></span>-->
<!--            <span>{{order.restaurant.rname}}</span>-->
            <span>{{procesDate(order.uresdate)}}</span>
            <span>{{procesDate(order.uresendDate)}}</span>
            <span>{{procesTime(order.urestime)}}</span>
            <span>{{order.uresprice}}</span>
          </div>
          <div class="orderItem">
            <ul>
              <li></li>
              <li v-for="(orderformitem,orderformitemIndex) in order.orderformitems">
                <span> {{ (orderformitemIndex+1)}}</span>
                <span>{{orderformitem.oiname}}</span>
                <span>{{orderformitem.oidesc}}</span>
              </li>
            </ul>
          </div>
        </div>

      </div>
      <span>
      <el-button type="success" @click="processOrder('allow')">同意</el-button>
         <el-button type="error" @click="processOrder('deny')">拒绝</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
  import rules from "../../../../static/js/validator/rules.js"
  import utils from "../../../../static/js/utils/index.js"
  import api from "../../../../axios/api";
  import utilsFD from "../../../../static/js/utils";
  export default {
    name: "confirmOrder",
    data(){
      return {
        //order:{name:"",pic:"",date:""},
        confirmDialogIsShow: true,
        rno:"",
        order:"",
        // orderForm: {"urno":"","rno":this.rno,"uresDate":"1111","uno":"190001","uresenddate":"" ,"orderformitemss":"", "orderformitems":[{"oiname":"","oidesc":""},{"oiname":"","oidesc":""},{"oiname":"","oidesc":""}]}  //  confirmOrderRules:{name:[{required:true,message:"球队名称不能为空",trigger:'blur'},
        //    {max:20,min:2,message:'长度异常 长度在2-20之间',trigger:'blur'},{pattern:/^[\u0391-\uFFE5A-Za-z]+$/,message:'球队名称必须为中文',trigger:'blur'}]}
      }
    },
    methods: {
      procesDate(date){
        return utilsFD.FD.Fd().initCNDateFromlong(date);
      },
      procesTime(time){
        return utilsFD.FD.Fd().initCNTime(new Date(time));
      },
      //页面初始化时加载的事件
      init(order) {
        this.order = order;
        console.log(this.order)
        this.confirmDialogIsShow = true;

       // this.order.date = utils.FD.Fd().initCNDate(date);
      },

      //关闭页面
      handleClose() {
        this.confirmDialogIsShow = false;
        //给父组件传参
        this.$emit("confirmDialogIsShow", this.confirmDialogIsShow);
      },
      processOrder: function (type) {
       //  console.log("http://localhost:9091/orderFormController/processOrder/"+ this.order.urno+"/"+type)
        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios( "/api/orderFormController/processOrder/"+ this.order.urno+"/"+type,null,"post"
        ).then(dto => {
          if(dto.code ==200){
            this.$message.success("订单操作成功")
            this.handleClose()
          }

          console.log(dto);
        });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
      },
      confirmOrder: function () {
        this.orderForm.orderformitemss = JSON.stringify(this.orderForm.orderformitems)
        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios( "/api/orderFormController/confirmOrderForm/", this.orderForm, "post"
      ).then(dto => {
            console.log(dto);
          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
      },

    },
    //监听
    watch: {
      dialogisShow(newValue, oldValue) {
        this.confirmDialogIsShow = newValue;
      }
    }
  }
</script>

<style scoped>
  #skills{position: relative;}
  #skills >p {background-color: red;width:100px;height:26px;text-align: center;line-height: 26px;color:white;
    border-radius: 4px 4px 0px 0px}
  #skills > hr{width: 560px;position: absolute;top:16px;border:solid 1px red;}/*调整线的颜色*/
  #skills > ul > li{list-style-type: none;margin-top:5px;}
  #skills > ul > li > span{height:26px;display: inline-block;}
  #skills > ul > li > span:nth-child(1){width:140px;}
  #skills > ul > li > span:nth-child(2){width:140px;}
  #skills > ul > li > span:nth-child(3){width:80px;}

</style>
